<style lang="less">
  @import '../../view/main/main';
</style>

<template>
  <div ref="scrollCon" @mousewheel="handleScroll" class="tags-outer-scroll-con">
    <div class="close-all-tag-con">
      <Dropdown transfer @on-click="handleTagsOption">
        <Button size="small" type="primary">
          标签选项
          <Icon type="arrow-down-b"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem name="clearAll">关闭所有</DropdownItem>
          <DropdownItem name="clearOthers">关闭其他</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div ref="scrollBody" class="tags-inner-scroll-body" :style="{left: tagBodyLeft + 'px'}">
      <transition-group name="taglist-moving-animation">
        <Tag
          type="dot"
          v-for="(item, index) in pageTagsList"
          ref="tagsPageOpened"
          :key="item.name"
          :name="item.name"
          @on-close="closePage"
          @click.native="linkTo(item)"
          :closable="item.name!=='home_index'"
          :color="item.children?(item.children[0].name===currentPageName?'primary':'default'):(item.name===currentPageName?'primary':'default')"
        >{{ itemTitle(item) }}
        </Tag>
      </transition-group>
    </div>
  </div>
</template>

<script>
  import {menuRouter,otherRouter} from '../../router/router'

  export default {
    name: 'tagsPageOpened',
    data () {
      return {
        allMenuList:[...menuRouter].concat(otherRouter),
        currentPageName: this.$route.name,
        tagBodyLeft: 0,
        refsTag: [],
        pageTagsList: [{
          title: '首页',
          path: '',
          name: 'home_index'
        }]
      }
    },
    computed: {
    },
    methods: {
      itemTitle (item) {
        if (typeof item.title === 'object') {
          return this.$t(item.title.i18n)
        } else {
          return item.title
        }
      },
      closePage (event, name) {
        this.pageTagsList.map((item, index) => {
          if (item.name === name) {
            this.pageTagsList.splice(index, 1)
          }
        })

        localStorage.pageOpenedList = JSON.stringify(this.pageTagsList)
        if (this.currentPageName === name) {
          let lastPageName = ''
          if (this.pageTagsList.length > 1) {
            lastPageName = this.pageTagsList[1].name
          } else {
            lastPageName = this.pageTagsList[0].name
          }
          this.$router.push({
            name: lastPageName
          })
        }
      },
      linkTo (item) {
        let routerObj = {}
        routerObj.name = item.name
        if (item.argu) {
          routerObj.params = item.argu
        }
        if (item.query) {
          routerObj.query = item.query
        }
        this.$router.push(routerObj)

      },
      handleScroll (e) {
        let left = 0
        if (e.wheelDelta > 0) {
          left = Math.min(0, this.tagBodyLeft + e.wheelDelta)
        } else {
          if (this.$refs.scrollCon.offsetWidth - 100 < this.$refs.scrollBody.offsetWidth) {
            if (this.tagBodyLeft < -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)) {
              left = this.tagBodyLeft
            } else {
              left = Math.max(this.tagBodyLeft + e.wheelDelta, this.$refs.scrollCon.offsetWidth - this.$refs.scrollBody.offsetWidth - 100)
            }
          } else {
            this.tagBodyLeft = 0
          }
        }
        this.tagBodyLeft = left
      },
      handleTagsOption (type) {
        if (type === 'clearAll') {
          this.pageTagsList.splice(1)
          this.$router.push({
            name: 'home_index'
          })
        } else {
          let currentIndex = 0
          this.pageTagsList.forEach((item, index) => {
            if (item.name === this.$route.name) {
              currentIndex = index
            }
          })
          if (currentIndex === 0) {
            this.pageTagsList.splice(1)
          } else {
            this.pageTagsList.splice(currentIndex + 1)
            this.pageTagsList.splice(1, currentIndex - 1)
          }
        }
        localStorage.pageOpenedList = JSON.stringify(this.pageTagsList)
        this.tagBodyLeft = 0
      },
      moveToView (tag) {
        if (tag.offsetLeft < -this.tagBodyLeft) {
          // 标签在可视区域左侧
          this.tagBodyLeft = -tag.offsetLeft + 10
        } else if (tag.offsetLeft + 10 > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - 100) {
          // 标签在可视区域
        } else {
          // 标签在可视区域右侧
          this.tagBodyLeft = -(tag.offsetLeft - (this.$refs.scrollCon.offsetWidth - 100 - tag.offsetWidth) + 20)
        }
      },addNewTag(name,argu,query,title){
        let i = 0
        let tagHasOpened = false
        while (i < this.pageTagsList.length) {
          if (name === this.pageTagsList[i].name) {  // 页面已经打开
            let openedPage = this.pageTagsList[i]
            if (argu) {
              openedPage.argu = argu
            }
            if (query)
              openedPage.query = query

            this.pageTagsList.splice(i, 1, openedPage)
            tagHasOpened = true
            break
          }
          i++
        }
        if (!tagHasOpened) {
          let tag={
            title:title,
            name:name,
            argu:argu,
            query:query
          }
          this.pageTagsList.push(tag)
        }
        localStorage.pageOpenedList = JSON.stringify(this.pageTagsList)
      }
    },
    mounted () {
      let openList = localStorage.pageOpenedList
      if (!this.isEmptyObject(openList)) {
        this.pageTagsList = JSON.parse(openList)
      }

      this.refsTag = this.$refs.tagsPageOpened
      setTimeout(() => {
        this.refsTag.forEach((item, index) => {
          if (this.$route.name === item.name) {
            let tag = this.refsTag[index].$el
            this.moveToView(tag)
          }
        })
      }, 1)  // 这里不设定时器就会有偏移bug
    },
    watch: {
      '$route' (to) {
        this.currentPageName = to.name
        this.addNewTag(to.name,to.params,to.query,to.meta.title)
        this.$nextTick(() => {
          this.refsTag.forEach((item, index) => {
            if (to.name === item.name) {
              let tag = this.refsTag[index].$el
              this.moveToView(tag)
            }
          })
        })
      }
    }
  }
</script>
